<template>
  <layout>
    <div class="container" id="myContainer">
<!--      <p>大苏打大大大大大大大大大算法啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>-->
<!--      <p>大苏打大大大大大大大大大算法啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>-->
<!--      <p>大苏打大大大大大大大大大算法啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>-->
<!--      <p>大苏打大大大大大大大大大算法啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>-->
    </div>
  </layout>
</template>

<script>
import {defineComponent, onMounted} from "vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import Layout from "../../Layout.vue";
import * as THREE from 'three';

export default defineComponent({
  name: "Geometries",
  components: {
    Layout
  },
  setup() {
    onMounted(() => {
      // initData()
    })
    const initData = () => {
      let scene = new THREE.Scene();
      // 立方体网格模型
      let geometry1 = new THREE.BoxGeometry(100, 100, 100)
      let material1 = new THREE.MeshLambertMaterial({
        color: 0x02ca30,
        opacity: 0.8,
        transparent: true
      })
      let mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
      scene.add(mesh1)

      // 球体网格模型
      let geometry2 = new THREE.SphereGeometry(60, 100,100)
      let material2 = new THREE.MeshStandardMaterial({
        color:0x9950ff,
        specular:0xffffff,
        shininess:1
      });
      //   new THREE.MeshLambertMaterial({
      //   color: 0x9950ff,
      //   opacity: 0.7,
      //   transparent: true
      // })
      let mesh2 = new THREE.Mesh(geometry2, material2)

      mesh2.translateX(-250) //球体网格模型沿Y轴正方向平移120
      mesh2.translateY(-200) //球体网格模型沿Y轴正方向平移120
      scene.add(mesh2)

      //圆柱网格模型
      let geometry3 = new THREE.CylinderGeometry(50,50,100,25)
      let material3 = new THREE.MeshLambertMaterial({
        color: 0xe31912,
        opacity: 0.7,
        transparent: true,
        // wireframe: true
      })
      let mesh3 = new THREE.Mesh(geometry3, material3)
      mesh3.position.set(250, 200, 0)  // 设置mesh3模型对象的xyz坐标为120,0,0
      scene.add(mesh3)

      // let axisHelper = new THREE
      // ========光源设置===============
      let point = new THREE.PointLight(0xffffff)
      point.position.set(400, 200, 300) // 设置点光源的位置
      scene.add(point)
      // 环境光
      let ambient = new THREE.AmbientLight(0x999999)
      scene.add(ambient)
      // let directional = new THREE.DirectionalLight(0x00ff00)
      // directional.position.set(400, 200, 300)
      // scene.add(directional)

      // =======相机设置===========
      const width = window.innerWidth;
      const height = window.innerHeight;
      const k = width/height;  //窗口宽高比
      const s = 200 //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      let camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000)
      camera.position.set(200, 300, 200) // 设置相机位置
      camera.lookAt(scene.position)  // 设置相机方向（指向的场景对象）

      // ===========创建渲染器对象============
      let renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height) // 设置渲染区域尺寸
      renderer.setClearColor(0x9bd3ff, 1) //设置背景颜色
      let myContainer = document.getElementById('myContainer')
      myContainer.appendChild(renderer.domElement) //body元素中插入canvas对象

      // 执行渲染操作  指定场景、相机作为参数
      renderer.render(scene, camera)
      let controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
      controls.addEventListener('change',() => {
        renderer.render(scene, camera)
        // mesh.rotateY(0.01);
      })
    }
    return {
    }
  }
})
</script>

<style scoped>

</style>